<template>
    <div>
        <!-- 头部 导航 -->
        <van-nav-bar title="标题" left-text="返回" left-arrow>
            <!-- v-slot: 简写 # -->
            <template v-slot:left>
                <span class="iconfont iconnew"></span>
            </template>
            <template #title>
                <div class="search-box" @click="$router.push('/search')">
                    <van-icon name="search" size="18" />
                    <span>搜索商品</span>
                </div>
            </template>
            <template #right>
                <!-- <van-icon name="search" size="18" /> -->
                <van-icon color="#fff" name="manager-o" size="25" />
            </template>
        </van-nav-bar>
        <!-- 栏目列表
         通过 v-model 绑定当前激活标签对应的索引值 给当前标签一个激活状态
         -->
        <van-tabs v-model="curIndex" sticky>
            <van-tab v-for="item in list" :key="item.id" 
            :title="item.name">
            <!-- 
                van-pull-refresh:下拉刷新组件
                下拉刷新时会触发 refresh 事件
                v-model：绑定的值为false表示加载完成
             -->
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                    <!-- 
                        v-model： 绑定的变量值为false表示当前数据已经加载完成
                        finished：值为true，表示所有数据全部加载完成
                        load：当组件滚动到底部时触发的事件，我们可以在这个事件处理函数中
                        发起请，实现数据加载
                        immediate-check: 关闭list组件的首次触发load事件
                            （请求的当数据比较少的时候，依然会触发load事件）
                     -->
                    <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                        :immediate-check="false"
                        >
                        <!-- 新闻(文章)列表
                         默认情况下：组件标签中不能直接使用原生事件
                         如何解决这个问题呢？答：vue提供了一个修饰符.native给我们
                         我们绑定点击事件的时候只需加上这个修饰符即可使用原生事件
                         -->
                        <newsItem @click.native="toDetail(item.id)" v-for="item in newsArr" 
                        :key="item.id" :obj="item"></newsItem>
                    </van-list>
                </van-pull-refresh>
                <!-- 加号  -->
                <!-- <span class="plus" @click="toCategory">+</span> -->
            </van-tab>
             <!-- v-slot: 简写# -->
                <!-- tabs提供了一个默认插槽 -->
                <span class="plus" @click="toCategory">+</span>
        </van-tabs>
    </div>
</template>

<script>
import { category,newsList } from "../api/news.js"
export default {
    data(){
        return {
            list: [], // 栏目列表
            curIndex: 1, // 默认请求头条的数据(头条的下标值)
            newsArr: [], // 新闻列表
            isLoading: false, // 控制下拉刷新状态的变量
            pageIndex: 1 , // 当前页数
            pageSize: 8,   //  数据的条数
            loading: false, // 控制上拉加载状态的变量
            finished: false, // 控制上拉加载 数据是否全部加载完成的变量
        }
    },
    created(){
        // 判断缓存中是否存在栏目列表数据，如果有则直接从缓存中获取，
        // 没有则从接口中获取栏目列表数据
        let list = JSON.parse(localStorage.getItem("list")) || []
        let delList = JSON.parse(localStorage.getItem("delList")) || []
        if(list.length === 0 && delList.length === 0){
            // 获取栏目列表数据
            category().then(res=>{
                this.list = res.data.data
                // 根据栏目id获取文章列表数据
                this.getNewsList()
            })
        }else{
            let defaultCategory = JSON.parse(localStorage.getItem("defaultCategory"))||[]
            this.list = [...defaultCategory, ...list]
            // 根据栏目id获取文章列表数据
            this.getNewsList()
        }
    },
    methods: {
        toCategory(){
            // 如果跳转页面不需要传参，可以直接使用如下语法进行跳转
            this.$router.push("/category")
        },
        // 跳转到文章详情页面
        toDetail(id){
            this.$router.push({
                path: "/articleDetail",
                query: {
                    id: id
                }
            })
        },
        // 下拉刷新 释放时会触发的一个函数
        onRefresh(){
            this.newsArr = []  // 解决数据重复导致key重复报错问题
            this.pageIndex = 1 // 解决获取到非第一页数据的问题
            this.finished = false // 解决刷新后，直接没有跟多数据了的问题
            // 实现刷新功能
            this.getNewsList()
        },
        // 上拉加载触发的函数
        onLoad(){
            this.pageIndex++
            this.getNewsList()
        },
        // 获取文章列表数据 , 为了实现后面的功能方便复用
        getNewsList(){
            newsList({
                category: this.list[this.curIndex].id,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize
            }).then(res=>{
                // this.newsArr = res.data.data;
                // 因为我们做上拉加载更多数据的功能，因此加载完一下页的数据，应该还能看到
                // 上一页的数据，因此我们不能直接像之前一样覆盖式的赋值，而是需要把请求的下一页的数据
                // 和上一页的数据拼接起来。
                this.newsArr = [...this.newsArr, ...res.data.data ]
                // 数据请求完成，把下拉刷新的状态设置为false表示刷新完成
                this.isLoading = false
                // 数据请求完成，把上拉加载的状态设置为false表示加载完成
                this.loading = false
                // 当所有的数据都加载完成后，需要把finished设置true表示已经没有更多数据了
                // 当我们请求回来的数据数量少于我们要求的数量(pageSize)的时候，此刻说明已经没有更多数据了
                if(res.data.data.length<this.pageSize){
                    this.finished = true
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar{
    background-color: red;
    .iconnew{
        color: #fff;
        font-size: 50px;
    }
    .van-nav-bar__title{
        width: 60%;
        .search-box{
            width: 100%;
            height: 36px;
            line-height: 36px;
            text-align: center;
            background: rgba(255,255,255,0.4);
            color: #fff;
            border-radius: 20px;
            .van-icon-search{
                color: #fff;
            }
        }
    }
}

// /deep/.van-tabs__nav{
//     position: inherit;
// }
.van-tabs{
    position: relative;
}
.plus{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 32px;
    text-align: center;
    width: 40px;
    height: 40px;
    background: #fff;
    font-weight: bold;
}
/deep/.van-tabs__nav{
    padding-right: 40px;
}
</style>